<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🛠️ 多功能工具箱 | 高效开发者助手</title>
    <style>
        :root {
            --primary: #4361ee;
            --primary-hover: #3a56d4;
            --text: #333;
            --text-light: #666;
            --bg: #f8f9fa;
            --bg-card: #ffffff;
            --border: #dee2e6;
            --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
            --font: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            --radius: 12px;
        }

        [data-theme="dark"] {
            --text: #e9ecef;
            --text-light: #adb5bd;
            --bg: #1a1a2e;
            --bg-card: #16213e;
            --border: #2c3e50;
            --shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font);
            background-color: var(--bg);
            color: var(--text);
            line-height: 1.6;
            transition: background-color 0.3s ease;
            min-height: 100vh;
            padding-bottom: 2rem;
        }

        header {
            background: var(--primary);
            color: white;
            padding: 1.5rem 2rem;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        header h1 {
            margin: 0;
            font-size: 1.8rem;
            font-weight: 600;
        }

        header p {
            margin: 0.5rem 0 0;
            opacity: 0.9;
            font-size: 1rem;
        }

        .theme-toggle {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 8px 12px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: background 0.3s ease;
        }

        .theme-toggle:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .intro {
            text-align: center;
            margin-bottom: 2.5rem;
        }

        .intro h2 {
            color: var(--primary);
            margin-bottom: 0.8rem;
        }

        .intro p {
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
        }

        .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.8rem;
        }

        .tool-card {
            background: var(--bg-card);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .tool-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
        }

        .card-header {
            padding: 1.4rem 1.2rem;
            background: var(--primary);
            color: white;
            font-weight: 600;
            font-size: 1.1rem;
        }

        .card-body {
            padding: 1.6rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .card-desc {
            color: var(--text-light);
            margin-bottom: 1.2rem;
            flex: 1;
        }

        .card-link {
            display: inline-block;
            padding: 10px 16px;
            background-color: #5ea351;
            color: white;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 500;
            text-align: center;
            transition: background-color 0.3s ease;
        }

        .card-link:hover {
            background-color: var(--primary-hover);
        }

        .footer {
            text-align: center;
            margin-top: 3rem;
            color: var(--text-light);
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            header {
                padding: 1.2rem;
            }
            header h1 {
                font-size: 1.5rem;
            }
            .theme-toggle {
                top: 0.8rem;
                right: 0.8rem;
                padding: 6px 10px;
            }
        }
    </style>
</head>
<body>

    <button class="theme-toggle" onclick="toggleTheme()">
        🌙 深色模式
    </button>

    <header>
        <h1>🛠️ 多功能工具箱</h1>
        <p>开发者 & 运维人员的高效助手 | 纯前端 · 隐私安全 · 离线可用</p>
    </header>

    <div class="container">
        <div class="intro">
            <h2>✨ 精选实用工具</h2>
            <p>所有工具均无需联网，数据永不离开您的设备，安全可靠。</p>
        </div>

        <div class="tools-grid">
            <!-- 工具 1 -->
            <div class="tool-card">
                <div class="card-header">🔄 curl 转 Java 代码</div>
                <div class="card-body">
                    <p class="card-desc">将 curl 命令自动转换为 Hutool 实现的 Java HTTP 请求代码，支持 POST、Headers、Body 等。</p>
                    <a href="tool/curl-to-java.html" class="card-link">立即使用</a>
                </div>
            </div>

            <!-- 工具 2 -->
            <div class="tool-card">
                <div class="card-header">🧾 JSON 格式化</div>
                <div class="card-body">
                    <p class="card-desc">美化、压缩、验证 JSON 数据，支持高亮显示和在线编辑，调试 API 必备。</p>
                    <a href="tool/json.html" class="card-link">立即使用</a>
                </div>
            </div>
			
			<!-- 工具 3 -->
            <div class="tool-card">
                <div class="card-header">👁️ JSON 视图</div>
                <div class="card-body">
                    <p class="card-desc">以树形结构清晰展示 JSON 数据，方便浏览和分析复杂数据。</p>
                    <a href="tool/json-view.html" class="card-link">立即使用</a>
                </div>
            </div>
			
            <!-- 工具 4 -->
            <div class="tool-card">
                <div class="card-header">🔒 Base64 编解码</div>
                <div class="card-body">
                    <p class="card-desc">快速进行 Base64 编码与解码，支持文本和简单文件操作。</p>
                    <a href="tool/base64.html" class="card-link">立即使用</a>
                </div>
            </div>

            <!-- 工具 5 -->
            <div class="tool-card">
                <div class="card-header">🎨 颜色转换器</div>
                <div class="card-body">
                    <p class="card-desc">HEX、RGB、HSL 互转，带实时预览，前端开发好帮手。</p>
                    <a href="tool/color-converter.html" class="card-link">立即使用</a>
                </div>
            </div>

            <!-- 工具 6 -->
            <div class="tool-card">
                <div class="card-header">🕒 时间戳转换</div>
                <div class="card-body">
                    <p class="card-desc">Unix 时间戳与标准时间互转，支持毫秒/秒，开发调试利器。</p>
                    <a href="tool/timestamp-convert.html" class="card-link">立即使用</a>
                </div>
            </div>

            <!-- 工具 7 -->
            <div class="tool-card">
                <div class="card-header">🌐 URL 编解码</div>
                <div class="card-body">
                    <p class="card-desc">对 URL 进行 encodeURIComponent/decodeURIComponent 操作，处理特殊字符。</p>
                    <a href="tool/url-encode-decode.html" class="card-link">立即使用</a>
                </div>
            </div>
			
			<!-- 工具 8 -->
            <div class="tool-card">
                <div class="card-header">🔍 SQL 压缩/格式化</div>
                <div class="card-body">
                    <p class="card-desc">美化或压缩 SQL 语句，让代码结构更清晰，便于阅读和分享。</p>
                    <a href="tool/sql-formatter.html" class="card-link">立即使用</a>
                </div>
            </div>
			
			<!-- 工具 9 -->
            <div class="tool-card">
                <div class="card-header">📄 XML 压缩/格式化</div>
                <div class="card-body">
                    <p class="card-desc">美化或压缩 XML 文档，方便查看和编辑复杂的 XML 结构。</p>
                    <a href="tool/XML-formatter.html" class="card-link">立即使用</a>
                </div>
            </div>
			
			<!-- 工具 10 -->
            <div class="tool-card">
                <div class="card-header">☕ JSON 转 Java Model</div>
                <div class="card-body">
                    <p class="card-desc">一键将 JSON 数据结构转换为 Java Bean 类代码，提升开发效率。</p>
                    <a href="tool/json-to-javamodel.html" class="card-link">立即使用</a>
                </div>
            </div>

			<!-- 工具 11 -->
            <div class="tool-card">
                <div class="card-header">🗄️ MyBatis 日志格式化</div>
                <div class="card-body">
                    <p class="card-desc">将 MyBatis 输出的多行日志转换为可执行的完整 SQL 语句，方便调试。</p>
                    <a href="tool/myBatisformatter.html" class="card-link">立即使用</a>
                </div>
            </div>
			<div class="tool-card">
                <div class="card-header">🖼️ 在线图片转 Base64</div>
                <div class="card-body">
                    <p class="card-desc">在线图片转 Base64 字符串，或 Base64 字符串转回图片</p>
                    <a href="tool/image-Base64.html" class="card-link">立即使用</a>
                </div>
            </div>
			

        </div>

        <div class="footer">
            <p>© 2025 高效工具集 | 所有工具均在本地运行，保障您的数据安全</p>
        </div>
    </div>

    <script>
        // 主题切换
        function toggleTheme() {
            const body = document.body;
            const btn = document.querySelector('.theme-toggle');
            if (body.getAttribute('data-theme') === 'dark') {
                body.removeAttribute('data-theme');
                btn.textContent = '🌙 深色模式';
            } else {
                body.setAttribute('data-theme', 'dark');
                btn.textContent = '☀️ 浅色模式';
            }
        }

        // 可选：记住用户偏好
        document.addEventListener('DOMContentLoaded', () => {
            const saved = localStorage.getItem('theme');
            if (saved === 'dark') {
                document.body.setAttribute('data-theme', 'dark');
                document.querySelector('.theme-toggle').textContent = '☀️ 浅色模式';
            }
        });
    </script>

</body>
</html>